body { font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self; }

html, body { width: 100%; height: 100%; }

::-webkit-scrollbar { width: 0; height: 0; }

html, body, ul, li, h2, h3, h1, h4, h5, h6, img, figure, figcaption, div, p, header, footer, input, button, canvas { margin: 0; padding: 0; }

input { outline: none; }

button { outline: none; }

img { display: block; }

li { list-style: none; }

a { text-decoration: none; }

body { -o-user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

@keyframes a1 { 0% { width: 0%; height: 0%; }
  100% { width: 2rem; height: 2.5rem; } }
@keyframes a2 { 0% { width: 0%; height: 0%; }
  100% { width: 2.8rem; height: 1.6rem; } }
@keyframes a3 { 0% { width: 0%; height: 0%; }
  100% { width: 1.1rem; height: 2.9rem; } }
@keyframes arrowMove { 0% { opacity: 0; transform: translate(0, 0); }
  50% { opacity: 1; transform: translate(0, -30px); }
  100% { opacity: 0; transform: translate(0, -50px); } }
@-webkit-keyframes arrowMove { 0% { opacity: 0; -webkit-transform: translate(0, 0); }
  50% { opacity: 1; -webkit-transform: translate(0, -30px); }
  100% { opacity: 0; -webkit-transform: translate(0, -50px); } }
@keyframes musicMove { 0% { transform: rotate(0); }
  100% { transform: rotate(360deg); } }
@-webkit-keyframes musicMove { 0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); } }
@keyframes loadingMove { 0% { transform: scaleY(1); }
  50% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); } }
.wrapper { width: 100%; height: 100%; }
.wrapper #loading { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 20; background: #fff; }
.wrapper #loading div { font-size: 0.3rem; color: #0F0; width: 100%; text-align: center; top: 50%; position: absolute; }
.wrapper #loading ul { position: absolute; left: 50%; top: 40%; width: 0.9rem; margin-left: -0.45rem; }
.wrapper #loading ul li { width: 0.05rem; height: 0.4rem; margin-right: 0.1rem; background: #0F0; float: left; animation: 2s linear infinite loadingMove; }
.wrapper #loading ul li:nth-of-type(1) { animation-delay: 0s; }
.wrapper #loading ul li:nth-of-type(2) { animation-delay: -0.2s; }
.wrapper #loading ul li:nth-of-type(3) { animation-delay: -0.4s; }
.wrapper #loading ul li:nth-of-type(4) { animation-delay: -0.6s; }
.wrapper #loading ul li:nth-of-type(5) { animation-delay: -0.8s; }
.wrapper #loading ul li:nth-of-type(6) { animation-delay: -1s; }
.wrapper #img_canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.wrapper #arrow { width: 0.9rem; height: 0.52rem; background: url(../img/arr.png) no-repeat; background-size: 100% 100%; position: absolute; left: 50%; bottom: 15px; margin-left: -0.45rem; z-index: 8; animation: 1s infinite arrowMove; -webkit-animation: 1s infinite arrowMove; }
.wrapper #music.active { animation: 1s linear infinite musicMove; -webkit-animation: 1s linear infinite musicMove; }
.wrapper #music { width: 0.7rem; height: 0.7rem; background: url(../img/music.png) no-repeat; background-size: 100% 100%; position: absolute; top: 0.2rem; right: 0.2rem; z-index: 8; }
.wrapper .swiper-container { width: 100%; height: 100%; position: relative; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.wrapper .swiper-container .swiper-wrapper { width: 100%; height: 100%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page li { transform: rotate(720deg); }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page { transform: rotate(720deg); }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page .ball1 { left: 50%; top: 30%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page .ball2 { left: 20%; top: 40%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page .ball3 { left: 80%; top: 40%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page .ball4 { left: 20%; top: 60%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page .ball5 { left: 80%; top: 60%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page .ball6 { left: 50%; top: 75%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page2 .slide_3 { transform: rotateY(720deg); }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page3 .slide_4 li:nth-of-type(1) { animation: a1 1s linear forwards; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page3 .slide_4 li:nth-of-type(2) { animation: a2 1s linear forwards; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide-active#page3 .slide_4 li:nth-of-type(3) { animation: a3 1s linear forwards; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide { font-size: 18px; background-size: cover; position: relative; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_1 { position: absolute; left: 20%; top: 65%; color: #fff; font-size: 0.3rem; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_2 li { width: 0.9rem; height: 0.9rem; position: absolute; margin-left: -0.45rem; background-size: cover; transition-duration: 1s; top: 50%; left: 50%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_2 .ball1 { background: url(../img/c1.png) no-repeat; background-size: 100% 100%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_2 .ball2 { background: url(../img/c2.png) no-repeat; background-size: 100% 100%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_2 .ball3 { background: url(../img/c3.png) no-repeat; background-size: 100% 100%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_2 .ball4 { background: url(../img/c4.png) no-repeat; background-size: 100% 100%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_2 .ball5 { background: url(../img/c5.png) no-repeat; background-size: 100% 100%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_2 .ball6 { background: url(../img/c6.png) no-repeat; background-size: 100% 100%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_3 { width: 4.6rem; height: 2.22rem; background: url(../img/d1.png) no-repeat; background-size: 100% 100%; position: absolute; left: 50%; margin-left: -2.3rem; bottom: 20%; transition-duration: 1s; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_4 li { color: #fff; font-size: 0.22rem; border: 2px #FFF solid; border-radius: 5px; box-shadow: 0 0 15px #FFF; word-wrap: break-word; position: absolute; overflow: hidden; padding: 5px; box-sizing: border-box; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_4 li:nth-of-type(1) { width: 2rem; height: 2.5rem; left: 4%; top: 14%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_4 li:nth-of-type(2) { width: 2.8rem; height: 1.6rem; left: 50%; top: 18%; }
.wrapper .swiper-container .swiper-wrapper .swiper-slide .slide_4 li:nth-of-type(3) { width: 1.1rem; height: 2.9rem; left: 76%; top: 39%; }
